<!DOCTYPE html>
<html>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font: 12px/1.5 arial;
            height: 100%;
        }
        #content {
            min-height: 100%;
            _height: 100%;
            position: relative;
        }
        #main {
            
            padding-bottom: 80px; /* 20px(font-size)x2(line-height) + 10px(padding)x2=60px*/
           border: 1px solid blue;
        }
        #footer {
            position: absolute;
            bottom: 0;
            padding: 10px 0;
            border: 1px solid red;
            width: 100%;
            margin-bottom: -60px;
        }
        #footer h1 {
            font: 20px/2 Arial;
            margin: 0;
            padding: 0 10px;
        }
    </style>
    <body>
        <div id="content">
            <div id="main">
            	
                <h1>main</h1>
                <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <br />
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <br />
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <p>文字文字文字文字文字文字文字文字文字文字</p>
                <div style="background: red">
                    <p>sdfasdf</p> 
                    <p>sdfasdf</p> 
                    <p>sdfasdf</p> 
                    <p>sdfasdf</p> 
                    <p>sdfasdf</p> 
                    <p>sdfasdf</p> 
                    <p>sdfasdf</p> 
                    <p>sdfasdf</p> 
                    <p>sdfasdf</p> 
                    <p>sdfasdf</p> 
                    <p>sdfasdf</p> 
                    <p>sdfasdf</p> 
                    <p>sdfasdf</p> 
                    <p>sdfasdf</p> 
                    <p>sdfasdf</p> 
                    <p>sdfasdf</p> 
                    <p>sdfasdf</p> 
                    <p>sdfasdf</p> 
                    <p>sdfasdf</p> 
                </div>
            </div>
            <div id="footer"><h1>Footer</h1><div></div>
    </body>
</html>